<template>
  <div class="login">
    <div class="left">
      <div class="img"></div>
    </div>
    <div class="right">
      <div class="login-box">
        <img src="@/assets/images/logo.png" alt="logo" class="logo" />
        <div class="wellcome-title">Welcome to {{ appConfig.web_name }}</div>
        <div class="subtitle">
          一个颜值与效率并存的后台开发框架，更多功能等你来探索！
        </div>
        <!-- 表单 -->
        <div class="login-form">
          <el-form :model="form" size="large" label-position="top">
            <el-form-item label="用户名">
              <el-input v-model="form.username" placeholder="输入用户名" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                type="password"
                v-model="form.password"
                placeholder="输入密码"
              />
            </el-form-item>
            <el-form-item>
              <el-checkbox-group v-model="form.type">
                <el-checkbox label="下次自动登录" name="type" />
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="login-btn" @click="onSubmit"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive } from "vue";
import { ElMessage } from "element-plus";
import api from "@/app/admin/api";
import userStore from "@/app/admin/store/user";
import appStore from "@/app/admin/store/app";
import tools from "@/lite/utils/tools";
import router from "@/lite/router";

const appConfig = computed(()=>{
  return appStore.state.config;
})

const form = reactive({
  username: "",
  password: "",
});



const onSubmit = async () => {
  const res = await api.admin.login(form);
  if (res.error) {
    ElMessage.error(res.msg);
  } else {
    tools.storage.set("token", res.data.token, 6000);
    await userStore.dispatch("profile");
   
    // console.log(router.getRoutes())
    router.push("/dashboard");
  }
};
</script>

<style lang="scss" scoped>
.login {
  display: flex;
}
.left {
  width: 1000px;
  height: 100vh;
  .img {
    background-image: url("@/assets/images/login-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
  }
}
.right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 30px;
  position: relative;
}
.login-box {
  width: 400px;
  .logo {
    width: 50px;
    height: 50px;

    margin-bottom: 50px;
  }
}
.login-box .wellcome-title {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 10px;
}
.login-box .subtitle {
  color: #999;
  font-size: 10px;
  margin-bottom: 30px;
}
.login-form {
  text-align: center;
}

.login-btn {
  width: 100%;
}
</style>
